<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1400px;
            height: 100%;
            /* background-color: pink; */
            margin: auto;
        }

        .box .menu {
            width: 400px;
            height: 100%;
            background-color: #353942;
            float: left;
        }

        .box .tubiao {
            width: 1000px;
            height: 800px;
            /* background-color: plum; */
            float: left;
        }

        .box .menu div {
            box-sizing: border-box;
            width: 400px;
            height: 60px;
            /* background-color: pink; */
            padding-left: 20px;
            line-height: 60px;
            color: white;
        }

        .box .menu div:nth-child(1) {
            border-bottom: 1px solid #ccc;
        }

        .box .menu div:nth-child(2) {
            border-bottom: 1px solid #ccc;
        }

        .box ul li {
            box-sizing: border-box;
            list-style: none;
            display: inline-block;
            width: 400px;
            height: 45px;
            /* background-color: #ccc; */
            line-height: 45px;
            color: white;
            padding-left: 20px;
        }


        .box ol li {
            box-sizing: border-box;
            list-style: none;
            display: inline-block;
            width: 400px;
            height: 45px;
            /* background-color: #ccc; */
            padding-left: 20px;
            line-height: 45px;
            color: white;
        }

        .box ul li:nth-child(1) {
            background-color: #157efb;
        }

        .box ul li:nth-child(4) {
            background-color: #ebedec;
        }

        .box .tubiao .nav1 {
            width: 1000px;
            height: 60px;
            /* background-color: pink; */
            position: relative;
        }

        .box .tubiao .nav2 {
            width: 1000px;
            height: 60px;
            /* background-color: palegoldenrod; */
        }

        .box .tubiao .nav1 span {
            margin-left: 20px;
            display: inline-block;
            font-size: 20px;
            margin-top: 10px;
        }

        .box .tubiao .nav1 input {
            outline: none;
            width: 200px;
            height: 30px;
            margin-left: 20px;

        }

        .box .tubiao .nav1 .icon-fangdajing {
            position: absolute;
            top: 10px;
            left: 390px;
        }

        .box .tubiao .nav1 .icon-lingdang {
            margin-left: 430px;
        }

        .box .tubiao .nav2 .one {
            display: inline-block;
            font-size: 30px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .box .tubiao .nav2 .two {
            display: inline-block;
            margin-left: 600px;
        }

        .line {
            width: 470px;
            height: 400px;
            /* background-color: paleturquoise; */
            float: left;
            border: 1px solid #ccc;
            margin-left: 15px;
        }

        .bar {
            width: 470px;
            height: 400px;
            /* background-color: palegoldenrod; */
            float: left;
            border: 1px solid #ccc;
            margin-left: 15px;
        }

        .zuo {
            width: 470px;
            height: 220px;
            /* background-color: pink; */
            border: 1px solid #ccc;
            margin-left: 15px;
            float: left;
            margin-top: 15px;
            position: relative;
        }

        .zuo .icon-fenlei {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        table {
            width: 470px;
        }

        table tr th {
            max-width: 400px;
        }

        table tr td {
            /* max-width: 400px; */
            text-align: center;
            /* width: 470px; */
            height: 30px;
            background-color: #ebedec;
            border-collapse: collapse;
        }

        .you {
            width: 470px;
            height: 220px;
            /* background-color: pink; */
            border: 1px solid #ccc;
            margin-left: 15px;
            float: left;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="menu">
            <div><span class="iconfont icon-wode"></span> AdminLTE 3</div>
            <div><span class="iconfont icon-xingmingyonghumingnicheng
                "> Alexander Pierce</div>
            <ul>
                <li><span class="iconfont icon-icon-"></span> Dashboard</li>
                <li><span class="iconfont icon-icon-"></span> Dashboard v1</li>
                <li><span class="iconfont icon-icon-"></span> Dashboard v2</li>
                <li><span class="iconfont icon-icon-"></span> Dashboard v3</li>
                <li><span class="iconfont icon-linkedin"></span> Widgets</li>
                <li><span class="iconfont icon-diqiu"></span> Charts</li>
                <li><span class="iconfont icon-weixin"></span> UI Elements</li>
                <li><span class="iconfont icon-zhihu-square-fill"></span> Forms</li>
                <li><span class="iconfont icon-toutiaoyangshi
                    "></span> Tables</li>
            </ul>
            <div><span class="iconfont icon-diqiu"></span> EXAMPLES</div>
            <ol>
                <li><span class="iconfont icon-mima"></span> Calendar</li>
                <li><span class="iconfont icon-xinlangweibo"></span> Mailbox</li>
                <li><span class="iconfont icon-fanggepailie"></span> Pages</li>
                <li><span class="iconfont icon-kefu"></span> Extras</li>
            </ol>
        </div>
        <div class="tubiao">
            <div class="nav1">
                <span class="iconfont icon-fenlei"></span><span>Home</span><span>Contact</span><input type="text"
                    placeholder="Search"><span class="iconfont icon-fangdajing"></span><span
                    class="iconfont icon-lingdang"></span><span class="iconfont icon-fanggepailie"></span><span
                    class="iconfont icon-youxiang"></span>
            </div>
            <div class="nav2">
                <span class="one">Dashboard V3</span> <span class="two">Home/Dashboard V3</span>
            </div>
            <div class="line"></div>
            <div class="bar"></div>
            <div class="zuo">
                <h2>Products</h2><span class="iconfont icon-fenlei"></span>
                <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Sales</th>
                            <th>More</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>Some Product</td>
                            <td>$13 USD</td>
                            <td>12,000 Soid</td>
                            <td><span class="iconfont icon-fangdajing"></span></td>
                        </tr>
                        <tr>
                            <td>Some Product</td>
                            <td>$13 USD</td>
                            <td>12,000 Soid</td>
                            <td><span class="iconfont icon-fangdajing"></span></td>
                        </tr>
                        <tr>
                            <td>Some Product</td>
                            <td>$13 USD</td>
                            <td>12,000 Soid</td>
                            <td><span class="iconfont icon-fangdajing"></span></td>
                        </tr>
                        <tr>
                            <td>Some Product</td>
                            <td>$13 USD</td>
                            <td>12,000 Soid</td>
                            <td><span class="iconfont icon-fangdajing"></span></td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <div class="you">
                <h2>Online Store Overview</h2>
                <table>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script src="./mock.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
    <script src="./mockdata.js"></script>
</body>

</html>
<script>
    var line = document.querySelector('.box .tubiao .line')
    var e = echarts.init(line)
    //console.log(line);
    e.setOption({
        title: { //标题
            text: 'Online store Visitors',
            left: 'left',
        },
        legend: {
            bottom: 20,
            right: 10,
        },

        xAxis: {
            type: 'category',
            data: ['18th', '20th', '22nd', '24th', '28th', '30th']
        },
        yAxis: {
            type: 'value',
            data: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
            max: 200,
            min: 0,
            splitNumber: 10
        },
        series: [
            {
                name: 'This Week',
                data: [60, 70, 75, 80, 78, 100],
                type: 'line',
                smooth: true
            },
            {
                name: 'Last Week',
                data: [100, 120, 155, 150, 160, 170],
                type: 'line',
                smooth: true
            }
        ],

    })

    var bar = document.querySelector('.box .tubiao .bar')
    var o = echarts.init(bar)
    o.setOption({
        title: { //图表的标题
            text: 'Sales Over Time',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
            // data: ['0', '$1k', '$2k', '$3k'],
            max: 3,
            min: 0,
            axisLabel: {
                formatter: '${value}k'
            },
            splitNumber: 3
        },
        series: [ //数据系列
            {
                name: 'This year',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
                ,
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [1.5, 2, 3, 2.5, 1, 3, 2]
            },
            {
                name: 'Last year',
                type: 'bar',//'line' , 'bar' , 'pie'
                barWidth: 20,
                data: [1, 2.5, 3, 2, 1, 3, 2],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: '#ccc', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        lineStyle: { width: 3 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });
    render(data.list)

    function render(data) {
        var str = data.map((item, index) => {
            return `
            <tr>
                <td>${item.Product}Product</td>
                <td>$${item.Price}Price</td>
                <td>${item.Sales}Sold</td>
                <td>${item.phone}</td>
            </tr>
            `
        }).join('')
        document.querySelector('.zuo tbody').innerHTML = str
        document.querySelector('.you tbody').innerHTML = str

    }

</script>